<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.13.0/css/xterm.css">
  <script src="https://cdn.jsdelivr.net/npm/xterm@4.13.0/lib/xterm.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
</head>

<body>
  <div id="terminal"></div>

  <button onclick="disconnect()">disconnect</button>
  <button onclick="connect()">connect</button>

  <script>
    function guid2() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }

    var term = new Terminal({
      rows: 32,
      theme: {
        "name": "MaterialDark",
        "black": "#212121",
        "red": "#b7141f",
        "green": "#457b24",
        "yellow": "#f6981e",
        "blue": "#134eb2",
        "purple": "#560088",
        "cyan": "#0e717c",
        "white": "#efefef",
        "brightBlack": "#424242",
        "brightRed": "#e83b3f",
        "brightGreen": "#7aba3a",
        "brightYellow": "#ffea2e",
        "brightBlue": "#54a4f3",
        "brightPurple": "#aa4dbc",
        "brightCyan": "#26bbd1",
        "brightWhite": "#d9d9d9",
        "background": "#232322",
        "foreground": "#e5e5e5",
        "selectionBackground": "#dfdfdf",
        "cursorColor": "#16afca"
      }
    });
    const fit = new FitAddon.FitAddon();
    term.loadAddon(fit);
    let ws;
    term.open(document.getElementById('terminal'));
    fit.fit();
    term.onKey((event) => {
      ws.send(JSON.stringify({
        "type": "data",
        "data": event.key
      }))
    });
    term.attachCustomKeyEventHandler(async function (e) {
      if (e.ctrlKey && !e.repeat && e.keyCode == 45 && e.type == "keydown") {
        document.execCommand('copy');
        return false;
      }
      if (e.shiftKey && !e.repeat && e.keyCode == 45 && e.type == "keydown") {
        const text = await navigator.clipboard.readText();
        ws.send(JSON.stringify({
          "type": "data",
          "data": text
        }))
        return false;
      }
    });


    function connect() {
      ws = new WebSocket(`wss://iaas.cloud.tencent.com/ws/webshell_lighthouse?seqId=${guid2()}`)
      ws.onmessage = (ev) => {
        let data = JSON.parse(ev.data);
        if (data.type == "ready") {
          ws.send(
            JSON.stringify({
              "type": "connect",
              "data": {
                "cols": term.cols,
                "rows": term.rows,
                "keepaliveInterval": 30000,
                "keepaliveCountMax": 200,
                "type": "privateKey",
                "host": "服务器IP",
                "instanceId": "lhins-XXXXXXX",
                "regionId": 1,
                "port": 22,
                "autoLogin": true
              }
            })
          )
        }
        if (data.type == "data") {
          term.write(data.data);
        }
        if (data.type == "shell-connected") {
          ws.send(JSON.stringify({
            "type": "data",
            "data": "TERM=xterm\n"
          }))
        }
      }
    }
    function disconnect() {
      ws.send(JSON.stringify({ "type": "logout" }));
    }
  </script>
</body>

</html>